<template>
  <div>
    <!-- 首页 -->
    <el-container class="home-container">
      <!-- 头部区域 -->
      <el-header style="height:100% !important;">
        <!-- 头部top部分 -->
        <div class="head-hd">
          <div class="head-hd-con">
            <div class="head-con-left">
              <i class="iconfont icon-tijikongjian"></i>
              <a href="javascript:;" @click="JumpRoute('/index')"
                >欢迎来到书荒楼</a
              >
            </div>
            <div class="head-con-right">
              <i class="iconfont icon-showpassword"></i>
              <a href="javascript:;">阅读你所爱书籍</a>
            </div>
            <div class="head-hd-right" v-if="user_name.length === 0">
              <el-button type="primary" size="mini" @click="Logindialogshow"
                >登录</el-button
              >
              <el-button type="success" size="mini" @click="Registdialogshow"
                >注册</el-button
              >
            </div>
            <div class="nri" v-else>
              Hi,{{ user_name }}-欢迎归来&nbsp;&nbsp;
              <a href="javascript:;" @click="JumpRoute('/bookself')">我的书架</a> |
              <a href="javascript:;" @click="Exitdialogshow">修改密码</a> |
              <a href="javascript:;" @click="logout">注销</a>&nbsp;&nbsp;
            </div>
          </div>
        </div>

        <!-- 头部con部分 -->
        <div class="head-bd">
          <!-- logo区域 -->
          <div class="head-logo">
            <img src="../assets/logo.png" alt="" />
            <span>书荒楼</span>
          </div>
          <!-- 搜索框区域 -->
          <div class="head-search">
            <el-input
              placeholder="可搜书名与作者，请您少字也别输错字。"
              v-model="search_data"
              class="input-with-select"
              clearable
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="SearchKey(search_data)"
              ></el-button>
            </el-input>
          </div>

          <!-- 留言区域 -->
          <div class="userpanel">
            <font class="red">留言：</font>
            <a href="javascript:;" class="red">求书添书</a>&nbsp;
            <a href="javascript:;">意见反馈</a>
            <br />
            <a href="javascript:;">积分规则</a>&nbsp;&nbsp;
            <a href="javascript:;">若从书荒楼跳走点击此处</a>
          </div>
        </div>

        <!-- 头部导航栏区域nav -->
        <div class="nav">
          <ul>
            <li v-for="item in Navlist" :key="item.id">
              <a href="javascript:;" @click="JumpRoute(item.url)">{{
                item.text
              }}</a>
            </li>
            <!-- <li><a href="#">我的书架</a></li>
            <li><a href="#">玄幻小说</a></li>
            <li><a href="#">修真小说</a></li>
            <li><a href="#">都市小说</a></li>
            <li><a href="#">网游小说</a></li>
            <li><a href="#">言情小说</a></li>
            <li><a href="#">科幻小说</a></li>
            <li><a href="#">排行榜单</a></li>
            <li><a href="#">全部小说</a></li> -->
          </ul>
        </div>
      </el-header>

      <!-- 内容区域 -->
      <el-main style="height:100% !important;">
        <!-- 路由占位符
          :key="$route.fullPath"解决动态路由跳转不刷新问题
        -->
        <router-view :key="$route.fullPath"></router-view>
      </el-main>

      <!-- 底部区域 -->
      <el-footer style="height:100% !important;">
        <div class="footer_link">
          &nbsp;热门推荐：
          <a
            href="javascript:;"
            v-for="item in Popluarlist"
            :key="item.id"
            @click="JumpDetailRoute(item.book_id)"
            >{{ item.book_name }}&nbsp;&nbsp;&nbsp;</a
          >
        </div>
        <div class="footer_cont">
          <p>
            本站所有小说为转载作品，所有章节均由网友上传，转载至本站只是为了宣传本书让更多读者欣赏。
          </p>
          <br />
          <p>Copyright © 2018-2022</p>
          &nbsp;<a href="javascript:;" @click="JumpRoute('/index')">书荒楼</a
          >&nbsp;
          <p>All Rights Reserved.</p>
          <br />
          <p>沪ICP备122374号(伪)</p>
          <br />
          <p>undefined</p>
        </div>
      </el-footer>
    </el-container>

    <!-- 登录对话框 -->
    <el-dialog
      title="用户登录"
      :visible.sync="LogindialogVisible"
      width="40%"
      @close="LogindialogClose"
    >
      <div align="center" style="margin-top: -20px; margin-bottom: 20px;">
        <el-button @click="ShowPassLogin" type="success">密码登录</el-button>
        <el-button @click="ShowPhoneLogin" type="warning">手机登录</el-button>
      </div>

      <!-- 密码登录表单 -->
      <el-form
        v-show="num == 1"
        :model="LoginFormPsd"
        :rules="LoginFormPsdRules"
        ref="LoginFormPsdRef"
        key="LoginFormPsdRef"
        label-width="95px"
        label-position="right"
      >
        <el-form-item label="账号" prop="username">
          <el-input
            placeholder="请输入用户账号"
            v-model="LoginFormPsd.username"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            placeholder="请输入用户密码"
            v-model="LoginFormPsd.password"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="img_code">
          <el-input
            placeholder="请输入图片验证码"
            v-model="LoginFormPsd.img_code"
            clearable
          >
            <!-- 刷新验证码 -->
            <el-button slot="append" @click="getImageVerification()">
              <img
                :src="this.image_show"
                title="看不清，换一张"
                width="100"
                height="30"
              />
            </el-button>
          </el-input>
        </el-form-item>
      </el-form>

      <!-- 手机号登录表单 -->
      <el-form
        v-show="num == 2"
        :model="LoginFormPhone"
        :rules="LoginFormPhoneRules"
        ref="LoginFormPhoneRef"
        key="LoginFormPhoneRef"
        label-width="95px"
        label-position="right"
      >
        <el-form-item label="手机号" prop="mobile">
          <el-input
            placeholder="请输入登录手机号"
            v-model="LoginFormPhone.mobile"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="sms_code">
          <el-input
            placeholder="请输入短信验证码"
            v-model="LoginFormPhone.sms_code"
            clearable
          >
            <!-- 短信验证码 -->
            <el-button
              slot="append"
              @click="getSmSVerification(LoginFormPhone.mobile, 'log')"
              :disabled="btns"
              >{{ sms_code_tip }}</el-button
            >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="LogindialogClose">取 消</el-button>
        <el-button type="primary" @click="Login">登 录</el-button>
      </span>
    </el-dialog>

    <!-- 注册对话框 -->
    <el-dialog
      title="用户注册"
      :visible.sync="RegistdialogVisible"
      width="40%"
      @close="RegistDialogClosed"
    >
      <!-- 注册表单 -->
      <el-form
        :model="RegistForm"
        :rules="RegistFormRules"
        ref="RegistFormRef"
        label-width="95px"
        label-position="right"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            placeholder="请输入用户名"
            v-model="RegistForm.username"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="RegistForm.password"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="passwords">
          <el-input
            placeholder="请再次输入密码"
            v-model="RegistForm.passwords"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input
            placeholder="请输入手机号"
            v-model="RegistForm.phone"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            placeholder="请输入邮箱"
            v-model="RegistForm.email"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="smscode">
          <el-input
            placeholder="请输入短信验证码"
            v-model="RegistForm.smscode"
            clearable
          >
            <!-- 短信验证码 -->
            <el-button
              slot="append"
              @click="getSmSVerification(RegistForm.phone, 'reg')"
              :disabled="btns"
              >{{ sms_code_tip }}</el-button
            >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="RegistDialogClosed">取 消</el-button>
        <el-button type="primary" @click="Registered">注 册</el-button>
      </span>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="ExitdialogVisible"
      width="40%"
      @close="ExitdialogClose"
    >
      <div align="center" style="margin-top: -20px; margin-bottom: 20px;">
        <el-button @click="ShowUserExit" type="info">用户名修改</el-button>
        <el-button @click="ShowPhoneExit" type="warning">手机号修改</el-button>
      </div>

      <!-- 用户名修改表单 -->
      <el-form
        v-show="exitnum == 1"
        :model="ExitFormUser"
        :rules="ExitFormUserRules"
        ref="ExitFormUserRef"
        key="ExitFormUserRef"
        label-width="95px"
        label-position="right"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            placeholder="请输入用户账号"
            v-model="ExitFormUser.username"
            clearable
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldpsd">
          <el-input
            placeholder="请输入修改的旧密码"
            v-model="ExitFormUser.oldpsd"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpsd">
          <el-input
            placeholder="请输入修改的新密码"
            v-model="ExitFormUser.newpsd"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="img_code">
          <el-input
            placeholder="请输入图片验证码"
            v-model="ExitFormUser.img_code"
            clearable
          >
            <!-- 刷新验证码 -->
            <el-button slot="append" @click="getImageVerification()">
              <img
                :src="this.image_show"
                title="看不清，换一张"
                width="100"
                height="30"
              />
            </el-button>
          </el-input>
        </el-form-item>
      </el-form>

      <!-- 手机号修改表单 -->
      <el-form
        v-show="exitnum == 2"
        :model="ExitFormPhone"
        :rules="ExitFormPhoneRules"
        ref="ExitFormPhoneRef"
        key="ExitFormPhoneRef"
        label-width="95px"
        label-position="right"
      >
        <el-form-item label="手机号" prop="mobile">
          <el-input
            placeholder="请输入登录手机号"
            v-model="ExitFormPhone.mobile"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpsd">
          <el-input
            placeholder="请输入修改的新密码"
            v-model="ExitFormPhone.newpsd"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="sms_code">
          <el-input
            placeholder="请输入短信验证码"
            v-model="ExitFormPhone.sms_code"
            clearable
          >
            <!-- 短信验证码 -->
            <el-button
              slot="append"
              @click="getSmSVerification(ExitFormPhone.mobile, 'log')"
              :disabled="btns"
              >{{ sms_code_tip }}</el-button
            >
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="ExitdialogClose">取 消</el-button>
        <el-button type="primary" @click="Exit">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
import '../assets/css/base.css'

export default {
  data() {
    // 注册验证两次输入密码是否一致
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.RegistForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    // 修改密码验证输入的新旧密码是否一致
    var validateNOPsd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value === this.ExitFormUser.oldpsd) {
        callback(new Error('新旧密码不可一致！'))
      } else {
        callback()
      }
    }
    // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }

      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        return cb()
      }

      cb(new Error('请输入合法的手机号'))
    }

    return {
      // 切换登录表单num
      num: 1,
      // 切换修改表单exitnum
      exitnum: 1,
      // 设置按钮的限制
      btns: false,
      // 发送短信安装码按钮信息
      sms_code_tip: '获取短信验证码',
      // 获取导航条分类数据
      Navlist: [],
      // 获取热门推荐小说数据
      Popluarlist: [],
      // 绑定输入框搜索内容
      search_data: '',
      // 用户登录名
      user_name: '',
      // 控制用户登录对话框的显示和隐藏
      LogindialogVisible: false,
      // 密码登录的表单数据
      LoginFormPsd: {
        username: '',
        password: '',
        img_code: ''
      },
      // 密码登录表单的验证规则对象
      LoginFormPsdRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '用户名的长度在3~10个字符之间',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '用户名的长度在6~15个字符之间',
            trigger: 'blur'
          }
        ],
        img_code: [
          { required: true, message: '请输入图片验证码', trigger: 'blur' }
        ]
      },
      // 手机号登录的表单数据
      LoginFormPhone: {
        mobile: '',
        sms_code: ''
      },
      // 手机号登录表单的验证规则对象
      LoginFormPhoneRules: {
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        sms_code: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' }
        ]
      },
      // 控制用户注册对话框的显示和隐藏
      RegistdialogVisible: false,
      // 用户注册的表单数据
      RegistForm: {
        username: '',
        password: '',
        passwords: '',
        phone: '',
        email: '',
        smscode: ''
      },
      // 用户注册表单的验证规则对象
      RegistFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '用户名的长度在3~10个字符之间',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '用户密码的长度在6~15个字符之间',
            trigger: 'blur'
          }
        ],
        passwords: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '用户密码的长度在6~15个字符之间',
            trigger: 'blur'
          },
          { validator: validatePass, trigger: 'blur', required: true }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        smscode: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' }
        ]
      },
      // 控制修改密码对话框的显示和隐藏
      ExitdialogVisible: false,
      // 用户名修改的表单数据
      ExitFormUser: {
        username: '',
        oldpsd: '', // 旧密码
        newpsd: '', // 新密码
        img_code: '' // 图片验证码
      },
      // 用户名修改表单的验证对象
      ExitFormUserRules: {
        oldpsd: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '用户密码的长度在6~15个字符之间',
            trigger: 'blur'
          }
        ],
        newpsd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '用户密码的长度在6~15个字符之间',
            trigger: 'blur'
          },
          { validator: validateNOPsd, trigger: 'blur', required: true }
        ],
        img_code: [
          { required: true, message: '请输入图片验证码', trigger: 'blur' }
        ]
      },
      // 手机号修改的表单数据
      ExitFormPhone: {
        mobile: '',
        newpsd: '',
        sms_code: ''
      },
      // 手机号修改表单的验证对象
      ExitFormPhoneRules: {
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        newpsd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '用户密码的长度在6~15个字符之间',
            trigger: 'blur'
          }
        ],
        sms_code: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' }
        ]
      },
      // 图片验证码
      image_show: '',
      // 特殊uuid验证码id值
      ImgCodeUuid: ''
    }
  },
  created() {
    // 验证本地token值保持登录状态
    this.KeepLoginuse()
    // getNavList 获取导航条小说分类数据
    this.getNavList()
    // getPopularList 获取热门推荐小说数据
    this.getPopularList()
    // 获取图片验证码
    this.getImageVerification()
  },
  methods: {
    // 点击事件跳转路由
    JumpRoute(url) {
      // 判断路由是否为 /bookself 我的书架 即判断是否登录用户
      if (url === '/bookself') {
        // 从本地中获取token
        const token = window.sessionStorage.getItem('token')
        if (!token) {
          // 显示登录对话框
          this.LogindialogVisible = true
          return this.$message.info('请先登录用户！')
        }else {
          this.$router.push({ path: '/bookself' })
        }
      }else {
        // 若不属于我的书架的路由，则跳转即可。
        this.$router.push({ path: url })
      }
      
    },
    // 点击事件，跳转小说详情页
    JumpDetailRoute(book_id) {
      this.$router.push({ path: '/book/' + book_id })
    },
    // 点击搜索按钮跳转 搜索页面
    SearchKey(key) {
      // 若无搜索内容，则跳转首页
      if (key === '') {
        this.$router.push({ path: '/index' })
      } else {
        this.$router.push({ path: '/search/' + key })
      }
    },
    // getNavList 获取导航条小说分类数据
    async getNavList() {
      const { data: res } = await this.$http.get('books_cates')

      if (res.status !== 201) {
        return this.$message.error('获取导航栏数据失败！')
      }

      this.Navlist = res.data
      // console.log(this.Navlist)
    },
    // getPopularList 获取热门推荐小说数据
    async getPopularList() {
      const { data: res } = await this.$http.get(`get_cate_limit/${8}`)

      if (res.status !== 200) {
        return this.$message.error('获取数据失败！')
      }
      // 请求成功将数据赋值给 Popluarlist 变量
      this.Popluarlist = res.data
    },
    /////////////////////////////////////////////////////////////////////////////////////////////////////
    // 用户注册相关事件函数
    // 展示用户注册对话框
    Registdialogshow() {
      this.RegistdialogVisible = true
    },
    // 关闭注册对话框 触发重置事件
    RegistDialogClosed() {
      this.$refs.RegistFormRef.resetFields()
      this.RegistdialogVisible = false
    },
    // 生成唯一uuid值
    generateUUID() {
      var d = new Date().getTime()
      if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now() //use high-precision timer if available
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
        /[xy]/g,
        function(c) {
          var r = (d + Math.random() * 16) % 16 | 0
          d = Math.floor(d / 16)
          return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16)
        }
      )
      return uuid
    },
    // 获取图片验证码
    async getImageVerification() {
      // 获取uuid特殊验证码id
      this.ImgCodeUuid = this.generateUUID()
      // 请求验证码二进制数据
      const { data: res } = await this.$http.get(
        `get_image_verification/${this.ImgCodeUuid}`,
        {
          responseType: 'blob'
        }
      )
      this.image_show = window.URL.createObjectURL(res)
    },
    // 点击发送短信验证码
    async getSmSVerification(mobile, source) {
      // 判断手机号是否输入
      if (!mobile) {
        return this.$message.info('请先输入手机号码！')
      } else if (mobile.length !== 11) {
        return this.$message.info('请输入11位手机号码！')
      }

      const { data: res } = await this.$http.get(
        `get_sms_verification_code/${source}/${mobile}`
      )
      // 判断请求是否有误
      if (res.status !== 200) {
        return this.$message.error(res.msg)
      }

      // 发送成功
      this.$message.success(res.msg)

      // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
      var Seconds = 60
      // 设置一个计时器
      var t = setInterval(
        () => {
          if (Seconds == 1) {
            // 如果计时器到最后, 清除计时器对象
            clearInterval(t)
            // 将点击获取验证码的按钮展示的文本回复成原始文本
            this.sms_code_tip = '获取短信验证码'
            // 将点击按钮的onclick事件函数恢复回去
            this.btns = false
          } else {
            this.btns = true
            Seconds -= 1
            // 展示倒计时信息
            this.sms_code_tip = Seconds + '秒'
          }
        },
        1000,
        60
      )
    },
    // 点击注册对话框 确定 按钮，触发表单验证
    Registered() {
      // valid返回验证的布尔值false/true
      this.$refs.RegistFormRef.validate(async valid => {
        if (!valid) return this.$message.error('请勿漏输入参数！')
        // 提交用户注册请求
        const { data: res } = await this.$http.post(`register`, this.RegistForm)

        // 判断其返回的验证码，提示其错误信息
        if (res.status !== 200) {
          return this.$message.error(res.msg)
        }

        this.$message.success('账号注册成功，跳转登录方框！')
        this.RegistdialogVisible = false
        this.LogindialogVisible = true
      })
    },
    /////////////////////////////////////////////////////////////////////////////////////////////////////
    // 用户登录相关事件函数
    // 展示用户登录对话框
    Logindialogshow() {
      this.LogindialogVisible = true
    },
    // 关闭登录对话框 触发重置事件
    LogindialogClose() {
      // 根据其num判断登录表单Ref是哪个
      if (this.num == 1) {
        // 重置密码登录信息
        this.$refs.LoginFormPsdRef.resetFields()
      } else if (this.num == 2) {
        // 重置手机登录信息
        this.$refs.LoginFormPhoneRef.resetFields()
      }
      this.LogindialogVisible = false
    },
    // 点击密码登录按钮，触发事件
    ShowPassLogin() {
      this.num = 1
      // 重置手机登录信息
      this.$refs.LoginFormPhoneRef.resetFields()
    },
    // 点击手机登录按钮，触发事件
    ShowPhoneLogin() {
      this.num = 2
      // 重置密码登录信息
      this.$refs.LoginFormPsdRef.resetFields()
    },
    // 点击登录对话框 登录按钮 触发表单验证
    Login() {
      if (this.num == 1) {
        this.$refs.LoginFormPsdRef.validate(async valid => {
          // console.log(this.ImgCodeUuid)
          if (!valid) return this.$message.error('请勿漏输入参数！')

          // 提交用户登录请求  密码登录特殊参数为psd
          const { data: res } = await this.$http.post(
            `login/psd/${this.ImgCodeUuid}`,
            this.LoginFormPsd
          )

          if (res.status !== 200) {
            return this.$message.error(res.msg)
          }

          // 登录成功后的行为链
          this.$message.success('用户密码登录成功')
          this.LogindialogVisible = false
          // 1.将登录成功之后的token，保存到客户端的 sessionStorage 中
          // token 只应在当前网站打开期间生效，所以将token保存在 sessionStorage 中
          window.sessionStorage.setItem('token', res.token)
          // 2.通过编程式导航跳转到首页，路由是/index
          // this.$router.push('/index')
          // 3.获取token解析用户信息
          this.KeepLoginuse()
        })
      } else if (this.num == 2) {
        this.$refs.LoginFormPhoneRef.validate(async valid => {
          if (!valid) return this.$message.error('请勿漏输入参数！')

          // 提交手机号用户登录请求
          const { data: ress } = await this.$http.post(
            `login/phone/123`,
            this.LoginFormPhone
          )

          if (ress.status !== 200) {
            return this.$message.error(ress.msg)
          }
          // 登录后的行为链
          this.$message.success('用户密码登录成功')
          this.LogindialogVisible = false
          // 1.将登录成功之后的token，保存到客户端的 sessionStorage 中
          // token 只应在当前网站打开期间生效，所以将token保存在 sessionStorage 中
          window.sessionStorage.setItem('token', ress.token)
          // 2.通过编程式导航跳转到首页，路由是/index
          // this.$router.push('/index')
          // 3.获取token解析用户信息
          this.KeepLoginuse()
        })
      }
    },
    // 解析token，返回用户信息
    async KeepLoginuse() {
      // 从本地获取token信息
      const token = window.sessionStorage.getItem('token')

      if (!token) {
        return
      }
      const { data: res } = await this.$http.get(`resolver/${token}`)

      if (res.status !== 200) {
        return
      }
      // 请求成功，将用户名称赋值给user_name变量
      this.user_name = res.uname
    },
    // 注销，退出登录功能
    async logout() {
      const { data: res } = await this.$http.get('logout')

      // 清空本地存储中的token值
      window.sessionStorage.clear()
      this.user_name = ''
      // 跳转路由
      this.$router.push('/index')
      // 打开登录对话框
      this.LogindialogVisible = true
      // 退出登录成功
      this.$message.success(res.msg)
    },
    ///////////////////////////////////////////////////////////////////////////////////////
    // 修改密码相关事件函数
    // 点击事件，展示修改密码对话框
    Exitdialogshow() {
      // 打开对话框之前，将用户名赋值上
      this.ExitFormUser.username = this.user_name
      this.ExitdialogVisible = true
    },
    // 点击用户名修改按钮，触发事件
    ShowUserExit() {
      this.exitnum = 1
      // 重置手机号修改信息
      this.$refs.ExitFormPhoneRef.resetFields()
    },
    // 点击手机号修改按钮，触发事件
    ShowPhoneExit() {
      this.exitnum = 2
      // 重置用户名修改信息
      this.$refs.ExitFormUserRef.resetFields()
    },
    // 关闭修改密码对话框 触发重置事件
    ExitdialogClose() {
      // 根据其num判断登录表单Ref是哪个
      if (this.exitnum == 1) {
        // 重置手机号修改密码信息
        this.$refs.ExitFormPhoneRef.resetFields()
      } else if (this.exitnum == 2) {
        // 重置用户名修改密码信息
        this.$refs.ExitFormUserRef.resetFields()
      }
      this.ExitdialogVisible = false
    },
    // 修改密码成功后的行为链
    ExitBehaviorChain() {
      // 退出登录
      this.logout()
      // 关闭修改密码对话框
      this.ExitdialogVisible = false
      // 打开登录对话框
      this.LogindialogVisible = true
    },
    // 点击修改密码对话框 修改按钮 触发表单验证码
    Exit() {
      if (this.exitnum == 1) {
        // 根据用户名修改密码
        this.$refs.ExitFormUserRef.validate(async valid => {
          if (!valid) return this.$message.error('请填写完整数据！')

          // 提交修改请求
          const { data: res } = await this.$http.put(
            `changepsd/uname/${this.ImgCodeUuid}`,
            this.ExitFormUser
          )

          if (res.status !== 200) {
            return this.$message.error(res.msg)
          }
          // 修改密码成功
          this.$message.success(res.msg)
          // 修改密码成功后的行为链
          this.ExitBehaviorChain()
        })
      } else if (this.exitnum == 2) {
        // 根据手机号修改密码
        this.$refs.ExitFormPhoneRef.validate(async valid => {
          if (!valid) return this.$message.error('请填写完整数据！')

          // 提交修改请求
          const { data: res } = await this.$http.put(
            `changepsd/phone/123`,
            this.ExitFormPhone
          )

          if (res.status !== 200) {
            return this.$message.error(res.msg)
          }
          // 修改密码成功
          this.$message.success(res.msg)
          // 修改密码成功后的行为链
          this.ExitBehaviorChain()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.iconfont {
  color: #6f78a7;
  margin-right: 5px;
}

.el-button--mini {
  padding: 5px 11px !important;
}

.el-main {
  margin-top: 5px;
}

.el-footer {
  overflow: hidden;
  text-align: center;
  width: 980px;
  margin: 10px auto auto;
  height: 120px;
}
</style>
